import { Link, useLocation } from 'react-router-dom'
import { Home, FileText, Settings, User, Bell, Search, Archive, Upload, Video } from 'lucide-react'
import './TopNavigation.css'

const TopNavigation = () => {
  const location = useLocation()

  const navItems = [
    { path: '/dashboard', icon: Home, label: '首页' },
    { path: '/resource-library', icon: Archive, label: '资源库' },
    { path: '/resource-import', icon: Upload, label: '资源导入' },
    { path: '/meeting/create', icon: Video, label: '会议' },
    { path: '/settings', icon: Settings, label: '设置' }
  ]

  return (
    <nav className="top-navigation">
      <div className="nav-container">
        {/* Logo */}
        <div className="nav-logo">
          <h1>智汇宝</h1>
        </div>

        {/* Navigation Items */}
        <div className="nav-items">
          {navItems.map((item) => {
            const Icon = item.icon
            const isActive = location.pathname === item.path ||
                            (item.path === '/resource-library' && location.pathname.startsWith('/resource/')) ||
                            (item.path === '/meeting/create' && location.pathname.startsWith('/meeting/'))
            return (
              <Link
                key={item.path}
                to={item.path}
                className={`nav-item ${isActive ? 'active' : ''}`}
              >
                <Icon size={20} />
                <span>{item.label}</span>
              </Link>
            )
          })}
        </div>

        {/* Right Side Actions */}
        <div className="nav-actions">
          <button className="nav-action-btn">
            <Search size={20} />
          </button>
          <button className="nav-action-btn">
            <Bell size={20} />
          </button>
          <button className="nav-action-btn">
            <User size={20} />
          </button>
        </div>
      </div>
    </nav>
  )
}

export default TopNavigation
